import CountUp from "react-countup";
import {
  ProgressAnalysisItemAmountWrap,
  ProgressAnalysisItemImg,
  ProgressAnalysisItemRightWrap,
  ProgressAnalysisItemTitle,
  ProgressAnalysisItemPercent,
  ProgressAnalysisItemWrap,
  ProgressAnalysisItemAmount,
} from "./styles";
import React from "react";

export interface ProgressAnalysisItemProps {
  /**
   * 设置图片src
   */
  imgProps?: React.ImgHTMLAttributes<HTMLImageElement>;
  /**
   * 标题
   */
  title?: string;
  /**
   * 百分比
   */
  percent?: number;
  /**
   * 金额
   */
  amount?: number;
}
const ProgressAnalysisItem = ({
  imgProps,
  title,
  percent = 0,
  amount = 0,
}: ProgressAnalysisItemProps) => {
  return (
    <ProgressAnalysisItemWrap>
      <ProgressAnalysisItemImg {...imgProps} />
      <ProgressAnalysisItemRightWrap>
        <ProgressAnalysisItemTitle>{title}</ProgressAnalysisItemTitle>
        <ProgressAnalysisItemAmountWrap>
          <ProgressAnalysisItemAmount>
            <CountUp start={0} end={amount} decimals={2} />
          </ProgressAnalysisItemAmount>
          <ProgressAnalysisItemPercent>
            <CountUp
              start={0}
              end={percent}
              decimals={1}
              formattingFn={(n) => n + "%"}
            />
          </ProgressAnalysisItemPercent>
        </ProgressAnalysisItemAmountWrap>
      </ProgressAnalysisItemRightWrap>
    </ProgressAnalysisItemWrap>
  );
};

export default ProgressAnalysisItem;
